<template>
    <div class="login">
      <MyHead title="找回密码"></MyHead>
      <div class="myform">
        <van-form validate-first ref="form" @submit="onSubmit" @failed="onfail">
          <van-field
            v-model="form.phone"
            name="phone"
            label="手机号"
            placeholder="手机号"
            :rules="[
              { required: true, message: '请填写手机号' },
              { pattern: reg.phone, message: '请输入正确的手机号' },
            ]"
            clearable
            left-icon="phone-o"
          />
          <van-field
            v-model="form.captcha"
            name="captcha"
            center
            clearable
            label="验证码"
            placeholder="请输入验证码"
            left-icon="star-o"
            :rules="[
              { required: true, message: '请填写验证码' },
              { pattern: reg.code, message: '请输入正确的验证码' },
            ]"
          >
            <template #button>
              <van-button
                v-if="toggle"
                @click="startSend"
                :disabled="!disabled"
                size="small"
                type="primary"
                native-type="button"
                >发送验证码</van-button
              >
              <van-button v-else :disabled="true" size="small" type="info"
                >剩余 {{ count }} S
              </van-button>
            </template>
          </van-field>
          <PassInput
            v-model="form.password"
            name="password"
            label="新密码"
            placeholder="新密码"
            :rules="[
              { required: true, message: '请填写新密码' },
              { pattern: reg.pwd, message: '请输入6-16的数字字母组合的密码' },
            ]"
          />
          <div class="linkitems" style="margin: 16px">
            <router-link class="cm" :to="{ name: 'register' }"
              >没有账号,去注册</router-link
            >
            <router-link class="co" :to="{ name: 'login' }">登录</router-link>
          </div>
          <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit"
              >确定找回</van-button
            >
          </div>
          <div style="margin: 16px">
            <van-button
              round
              block
              type="danger"
              native-type="button"
              @click="resetData"
              >重置</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </template>

<script>
let timer;
export default {
  data() {
    return {
      form: {},
      toggle: true,
      count: 10,
    };
  },
  computed: {
    disabled() {
      return this.reg.phone.test(this.form.phone);
    },
  },
  methods: {
    resetData() {
      this.form = {};
    },
    async onSubmit(value) {
      console.log(value);
      let res = await this.$ajax.findUser({ phone: this.form.phone });
      console.log(res[0]);
      if (res.length > 0) {
        let res1 = await this.$ajax.verifyCaptcha(value);
        if (res1.code == 200 && res1.data == true) {
         // 修改密码 
          // console.log(res[0].password, this.form.password);
          // console.log(res[0].id);
          let res2 = await this.$ajax.findPass(res[0].id, {
            password:this.form.password,
            dbpass:this.form.password,
          });
          console.log(res2);
          if (res2) {
            this.ShowSuccess("密码找回成功");
            this.changeUserInfo(null)   
            this.$router.push({ name: "login" });
          } else {
            this.ShowFail("密码找回失败");
          }
        } else {
          this.ShowFail("验证码错误");
        }
      } else {
        this.ShowFail("手机号没有注册，请先注册");
      }
    },
    onfail() {
      this.ShowFail("校验失败");
    },
    async startSend() {
     
      //发送短信
      //先判断是否注册过 注册才能发送 否则提示请注册
      let res = await this.$ajax.findUser({ phone: this.form.phone });
      if (res.length > 0) {
        this.timeDown();
        let res1 = await this.$ajax.sendCaptcha({ phone: this.form.phone }); // 网易云接口
        console.log(res1);
        if (res1.code == 200 && res1.data == true) {
          this.ShowSuccess("验证码发送成功");
        } else {
          this.ShowFail("发送失败");
        }
      } else {
        this.ShowFail("手机号没有注册,请先注册.");
      }
    },
    timeDown() {
      this.count--;
      this.toggle = false;
      timer = setInterval(() => {
        if (this.count > 0) {
          this.count--;
          this.toggle = false;
        } else {
          clearInterval(timer);
          timer = null;
          this.count = 10;
          this.toggle = true;
        }
      }, 1000);
    },
  },
};
</script>


<style lang="scss">
.login {
  .myform {
    padding: 15px;
    .linkitems {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      font-size: 12px;
      margin-top: 20px;
      .cm {
        display: block;
        text-align: center;
        max-width: 120px;
        height: 20px;
        line-height: 20px;
        background: skyblue;
        border-radius: 10px;
        color: pink;
        padding: 0px 5px;
      }
      .co {
        display: block;
        text-align: center;
        width: 60px;
        height: 20px;
        line-height: 20px;
        background: pink;
        border-radius: 10px;
        color: skyblue;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
    .van-button--round::v-deep {
      background: #ff9db5;;
      border-radius: 4px;
      border: 1px solid #fb7299;
    }
</style>